<template>
  <div class="">
    <div class="history" v-if="isShow">
      <div class="top">
        <h4>历史记录</h4>
        <van-icon name="delete-o" @click="deleteData" />
      </div>
      <div class="down">
        <van-tag v-for="(item,index) in historyKeywordList" :key="index" plain type="default" @click="tatClick(item)">
          {{item}}
        </van-tag>
      </div>
    </div>
    <div class="history">
      <div class="top">
        <h4>热门搜索</h4>
      </div>
      <div class="down">
        <van-tag v-for="(item,index) in hotKeywordList" @click="tatClick(item.keyword)" :key="index" plain
          :type="item.is_hot==1 ? 'danger':'default'">{{item.keyword}}
        </van-tag>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    GetTdeleteData
  } from '@/request/api'
  export default {
    props: ['historyKeywordList', 'hotKeywordList'],
    components: {},
    data() {
      return {
        isShow: true
      };
    },
    computed: {},
    watch: {},
    methods: {
      tatClick(item) {
        console.log(item)
        //子传父
        this.$emit('tatClick', item);
      },
      //清空历史记录
      deleteData() {
        GetTdeleteData().then(res => {
          if (res.errno == 0) {
            //延迟
            setTimeout(() => {
              this.$toast.success('成功删除');
              this.isShow = false;
            }, 1000)
          }
        })
      }
    },
    created() {

    },
    mounted() {},
  }
</script>
<style lang='less' scoped>
  .history {
    padding: 0 2%;
    background: #fff;
    margin-bottom: .2rem;

    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: .5rem;
      font-size: .2rem;

      h4 {
        font-weight: normal;
      }
    }

    .down {
      .van-tag {
        font-size: .14rem;
        margin-right: .1rem;
        margin-bottom: .1rem;
        padding: .03rem;
      }
    }
  }
</style>
